/*
  Side Bar Styles
  ------------------------------------------------------------------------------
*/

$sidebar-width-sm: 140px;
$sidebar-width-md: 240px;

.side-bar {
  @include no-user-select();
  overflow: hidden;
  transform: translate3d(0,0,0);
  flex: 0 1 auto;
  border-radius: $radius 0 0 $radius;
  background-color: $g2-kevlar;
  max-width: 250px;

  &.show {
    flex: 1 0 $sidebar-width-sm;
  }
}

.side-bar--container {
  box-sizing: border-box;
  opacity: 0;
  height: 100%;
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  padding: $ix-marg-d 0;
}

.side-bar.show .side-bar--container {
  opacity: 1;
}

.side-bar--title {
  text-align: left;
  margin: 0 $ix-marg-c $ix-marg-c $ix-marg-c;
  color: $g13-mist;
  font-size: $ix-text-base-1;
}

.side-bar--tabs {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  flex: 1 1 0;
  padding-bottom: $ix-marg-c;
}

.side-bar--tab {
  flex-shrink: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: $radius 0 0 $radius;
  font-size: 15px;
  font-weight: 600;
  margin-left: $ix-marg-c;
  color: $g10-wolf;
  background-color: transparent;
  white-space: nowrap;

  &:hover {
    color: $g15-platinum;
    cursor: pointer;
    background-color: rgba($g3-castle, 0.6);
  }

  &.active {
    color: $g15-platinum;
    background-color: $g3-castle;
  }
}

.side-bar--icon {
  width: 16px;
  color: $g7-graphite;
  display: inline-block;
  font-size: 16px;
  margin: 0 13px;

  .side-bar--tab:hover & {
    color: $g11-sidewalk;
  }

  .side-bar--tab.active & {
    color: $c-pool;
  }
}

// Tab Status Coloration
.side-bar--tab__success,
.side-bar--tab__success:hover {
  &,
  & .side-bar--icon {
    color: $c-rainforest;
  }
}

.side-bar--tab__pending,
.side-bar--tab__pending:hover {
  &,
  & .side-bar--icon {
    color: $c-pineapple;
  }
}

.side-bar--tab__error,
.side-bar--tab__error:hover {
  &,
  & .side-bar--icon {
    color: $c-dreamsicle;
  }
}

.side-bar--buttons {
  margin: 0 $ix-marg-c;
}

.side-bar--button {
  width: 100%;
}

@media screen and (min-width: $grid--breakpoint-md) {
  .side-bar--tab {
    margin-left: $ix-marg-d;
  }

  .side-bar--title {
    margin: 0 $ix-marg-d $ix-marg-c $ix-marg-d;
    font-size: $ix-text-base-2;
  }

  .side-bar--buttons {
    margin: 0 $ix-marg-d;
  }

  .side-bar {
    &.show {
      flex: 1 0 $sidebar-width-md;
    }
  }
}